{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/css/bootstrap-select.css">
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link rel="stylesheet" href="/static/jstree/css/style.min.css" />
	<link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
	<link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> 
	<link href="/static/datatable/datatables.net-select/css/select.dataTables.min.css" rel="stylesheet"> 
	<link href="/static/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <link href="/static/css/doublebox-bootstrap.css" rel="stylesheet"> 
	<style type="text/css"> 	
        .modal-select{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
            }
          .modal-header{
            cursor:move;
          }			
	</style>      
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
        
            <div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2><i class="fa fa-tree"></i>组织架构<small>Structure Tree</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>                   
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">                 
                    <div class="row">
                      <div class="col-sm-3 mail_list_column"> 
<!--                       <select class="selectpicker form-control" data-header="选择一个环境类型查询" data-live-search="true" data-live-search-placeholder="搜索" data-none-Selected-Text="请选择" data-size="10">
                      </select>
                      <input id="search-input" type="text" class="form-control" placeholder="检索关键词...">   -->
					<div class="form-group">
					    <div class="input-group col-xs-12">
					        <input id="search-input" type="text" class="form-control" placeholder="检索关键词...">
					    </div>
					</div>            
                      <!-- <span class="section"></span>  -->
					  <legend></legend>                
                      <div id="structureTree"></div>                                     
                      </div>
                      <!-- /MAIL LIST -->

                      <!-- CONTENT MAIL -->
                      <div class="col-sm-9 mail_view">
						<div class="row">
	                         <div class="col-sm-12" id="childrenNodes" style="display:none;">
				                <div class="x_panel">
				                  <div class="x_title">
				                    <h2 id="nodeName">下属节点 <small>Business Children Nodes</small></h2>
				                    <div class="clearfix"></div>
				                  </div>
				                  <div class="x_content">
				                    <table class="table" id="structureChildrenNodesTableLists">
				                      <thead>
				                        <tr>
				                          <th>ID</th>
				                          <th>名称</th>
				                          <th>备注</th>
				                          <th>类型</th>
				                          <th>邮件组地址</th>
				                          <th>企业微信地址</th>
				                          <th>钉钉地址</th>
				                        </tr>
				                      </thead>
				                      <tbody>
				                      </tbody>
				                    </table>
				                  </div>
				                </div>
							</div>
	                         <div class="col-sm-12" id="nodesAssets" style="display:none;">
				                <div class="x_panel">
				                  <div class="x_title">
				                    <h2 id="lastNodeName">下属节点 <small>Department Member</small></h2>
				                    <div class="clearfix"></div>
				                  </div>
				                  <div class="x_content">
				                    <table class="table table-striped table-bordered" id="structureLastNodesMemberTableLists">
				                      <thead>
				                        <tr>
				                          <th class="text-center">选择</th>
				                          <th>登陆名</th>
				                          <th>用户名</th>
				                          <th>邮箱地址</th>
				                          <th>职务</th>
				                          <th>上级领导</th>
				                          <th>手机号</th>
				                        </tr>
				                      </thead>
				                      <tbody>
				                      </tbody>
				                    </table>
				                  </div>
				                </div>
							</div>							
	                     </div>
	                     <div class="row">
	                        <div class="inbox-body" id="assets_detail">	
	                        </div>	                     
	                     </div>
                      </div>
                      <!-- /CONTENT MAIL -->
                    </div>
                  </div>
                </div>
              </div>
            </div>         
        
        <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2><i class="fa fa-bars"></i> 用户管理<small>User Manage</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">


                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="true"><i class="fa fa-sitemap"></i> 部门信息</a>
                        </li>                      
                        <li role="presentation" class=""><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-map-marker"></i> 用户列表</a>
                        </li>
                         <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-users"></i> 用户角色</a>
                        </li>
<!--                         <li role="presentation" class=""><a href="#tab_content4" role="tab" id="profile-tab3" data-toggle="tab" aria-expanded="false"><i class="fa fa-bookmark"></i> 标签分组</a>
                        </li>     -->                 
                      </ul>
                      <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade" id="tab_content1" aria-labelledby="home-tab">			              
			              <div class="col-md-12 col-sm-12 col-xs-12">
			                <div class="x_panel">
			                  <div class="x_title">
			                    <h2>用户信息 <small>User Detail</small></h2>

			                    <div class="clearfix"></div>
			                  </div>
			                  <div class="x_content">
<!-- 			                    <div>
			                     	<button type="button" name="add-navbar-number" class="btn btn-xs btn-default" data-toggle="modal" data-target=".bs-example-modal-navbarnumber"><i class="glyphicon glyphicon-plus"></i></button>
			                    </div> -->
			                    <table class="table" id="userManageListTable">
			                      <thead>
			                        <tr>
			                          <th>ID</th>
			                          <th>登陆名</th>
			                          <th>中文名</th>
			                          <th>电话号码</th>
			                          <th>邮箱地址</th>
			                          <th>超级管理员</th>
			                          <th>职务</th>
			                          <th>上级</th>
			                          <th>最后登录</th>
			                          <th>注册日期</th>
			                          <th>是否激活</th>
			                          <th class="text-center">操作</th>
			                        </tr>
			                      </thead>
			                      <tbody>
			                      </tbody>
			                    </table>
			
			                  </div>
			                </div>
			              </div>			              
			              
                        </div>                        
                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                        
 			              <div class="col-md-12 col-sm-12 col-xs-12">
			                <div class="x_panel">
			                  <div class="x_title">
			                    <h2>用户角色信息 <small>Roles Detail</small></h2>
			                    <div class="clearfix"></div>
			                  </div>
			                  <div class="x_content">

			                    <table class="table" id="roleManageListTable">
			                      <thead>
			                        <tr>
			                          <th>ID</th>
			                          <th>组名</th>
			                          <th>备注</th>
			                          <th class="text-center">操作</th>
			                        </tr>
			                      </thead>
			                      <tbody>
			                      </tbody>
			                    </table>
			
			                  </div>
			                </div>
			              </div>                                    
						</div>
						
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content3" aria-labelledby="profile-tab">
 			              <div class="col-md-12 col-sm-12 col-xs-12">
			                <div class="x_panel">
			                  <div class="x_title">
			                    <h2>组织架构信息 <small>Structure Detail</small></h2>
			                    <div class="clearfix"></div>
			                  </div>
			                  <div class="x_content">

			                    <table class="table" id="structureRootTableLists">
			                      <thead>
			                        <tr>
			                          <th>ID</th>
			                          <th>名称</th>
			                          <th>备注</th>
			                          <th>部门负责人</th>
			                          <th>类型</th>
			                          <th>邮件组地址</th>
			                          <th>企业微信地址</th>
			                          <th>钉钉地址</th>
			                          <th class="text-center">操作</th>
			                        </tr>
			                      </thead>
			                      <tbody>
			                      </tbody>
			                    </table>
			
			                  </div>
			                </div>
			              </div>             	               
                        </div>
                        
                        <div role="tabpanel" class="tab-pane fade" id="tab_content4" aria-labelledby="profile-tab">
                        
                        </div>                        
                        
                      </div>
                    </div>

                  </div>
                </div>
              </div>        
        </div>        
	
        <div id="addStructureMemberModal" class="modal fade bs-example-modal-business-assets" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="addStructureMemberModalLabel">管理成员</h4>
              </div>
              <div class="modal-body">
                    <form id="addStructureMemberForm" data-parsley-validate class="form-horizontal form-label-left">{% csrf_token %}
                      <div class="form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="addStructureMemberSelect">成员管理 <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <select class="selectpicker form-control" data-actions-box="true" multiple data-header="至少选择一个成员进行提交" data-live-search="true" data-live-search-placeholder="搜索" data-none-Selected-Text="请选择" data-size="10"   id="addStructureMemberSelect" name="user">
                          </select>
                        </div>
                      </div>
                    </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="addStructureMemberSubmit" value=""  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div> 

        <div id="addStructureRootModal" class="modal fade bs-example-modal-project" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myRootModalLabel">业务节点</h4>
              </div>
              <div class="modal-body">
                    <form id="structureRootForm" class="main form-horizontal">{% csrf_token %}                   
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-name">名称 <span class="required"></span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" required="required" id="structure-node-name" name="text" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>                      
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-desc">描述 <span class="required"></span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text"  required="required" id="structure-node-desc" name="desc" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>   
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-type">类型 <span class="required"></span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <select class="selectpicker form-control" id="structure-node-type" name="type">
                          	<option value="unit">单位</option>
                          </select>
                        </div>
                      </div>  
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12">负责人<span class="required"></span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <select class="selectpicker form-control" id="structure-node-manage" data-live-search="true" data-live-search-placeholder="搜索" data-none-Selected-Text="请选择" data-size="10" name="manage" title="部门负责人">
                          </select>
                        </div>
                      </div>                       
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-desc">邮件</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text" id="structure-node-mail" name="mail_group" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>     
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-desc">微信</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text"  id="structure-node-wechat" name="wechat_webhook_url" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>     
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="structure-node-desc">钉钉
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="text"  required="required" id="structure-node-dingding" name="dingding_webhook_url" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>                                                                                                    
                    </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="addStructureRootSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>

        <div  class="modal fade bs-example-modal-user-Roles" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserRolesModalLabel">标签分类</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-group-doublebox" class="demo">
			        </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userRolesubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>	


        <div  class="modal fade bs-example-modal-user-perms" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserPermsModalLabel">用户权限</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-perms-doublebox" class="demo"> </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userPermsSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>	
        
        <div  class="modal fade bs-example-modal-user-assets" data-backdrop="static"  tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myUserAssetsModalLabel">用户权限</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="user-assets-doublebox" class="demo"> </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="userAssetsSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>	        

        <div id="myAddUserModal" class="modal fade bs-example-modal-navbar" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
              </div>
              <div class="modal-body">
				<form id="addUserForm" class="main form-horizontal">
					<fieldset>
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-user"></i></label>
							<div class="col-sm-6">
								<input type="text" class="form-control" placeholder="Username" name="username" required/>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-male"></i></label>
							<div class="col-sm-6">
								<input type="text" class="form-control" placeholder="中文名称" name="name" required/>
							</div>
						</div>		
									
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-picture-o"></i></label>
							<div class="col-sm-6">
								<input id="user_avatar" type="file" class="file" class="form-control" placeholder="头像" name="avatar" required/>
							</div>
						</div>									
										
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-envelope"></i></label>
							<div class="col-sm-6">
								<input type="email" class="form-control" placeholder="Email" name="email" required/>
							</div>
						</div>									

						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-phone"></i></label>
							<div class="col-sm-6">
								<input type="email" class="form-control" placeholder="电话号码" name="mobile" required/>
							</div>
						</div>	

<!-- 						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-lock"></i></label>
							<div class="col-sm-6">
								<input type="password" class="form-control" placeholder="Password" name="password" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-retweet"></i></label>
							<div class="col-sm-6">
								<input type="password" class="form-control" placeholder="Repeat password" name="c_password"/>
							</div>
						</div>	 -->
						
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-user"></i></label>
							<div class="col-sm-6">
								<select class="selectpicker form-control" name="post" title="角色">
									<option selected="selected" value="staff">普通员工</option>
									<option value="manage">管理人员</option>
								</select>
							</div>
						</div>						
							
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-check"></i></label>
							<div class="col-sm-6">
								<select class="selectpicker form-control" name="is_active">
									<option selected="selected" name="is_active" value="0">不激活</option>
									<option name="is_active" value="1">激活</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-paper-plane"></i></label>
							<div class="col-sm-6">
								<select class="selectpicker form-control" id="superior" name="superior" title="上级">
									<option selected="selected">无</option>								
								</select>
							</div>
						</div>
						
						<div class="form-group">
							<label class="col-sm-3 control-label"><i class="fa fa-gavel"></i></label>
							<div class="col-sm-6">
								<select class="selectpicker form-control" name="is_superuser">
									<option selected="selected" name="is_superuser" value="0">普通用户</option>
									<option name="is_superuser" value="1">超级管理员</option>
								</select>
							</div>
						</div>																					
							<div class="space-24"></div>
					</fieldset>
				</form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="addUsersubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div> 

        <div  class="modal fade bs-example-modal-role-perms"  data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myRolesPermsModalLabel">用户角色权限权限</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="group-perms-doublebox" class="demo">
			        </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="groupPermsSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>	
        
         <div  class="modal fade bs-example-modal-role-users"  data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myRoleUsersModalLabel">角色成员</h4>
              </div>
              <div class="modal-body ue-container">
              
				 <select multiple="multiple" size="10" name="role-users-doublebox" class="demo">
			        </select>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="roleUsersSubmit"  class="btn btn-primary">保存</button>
              </div>

            </div>
          </div>
        </div>        
	
                         
{% endblock %}
{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="/static/jstree/js/jstree.min.js"></script>
	<script src="/static/validator/validator.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
    <script src="/static/datatable/datatables.net-select/js/dataTables.select.min.js"></script>		
    <script src="/static/js/doublebox/doublebox-bootstrap.js"></script>
	<script src="/static/js/account/manage.js"></script>
	<script src="/static/js/dragable/dragable.js"></script> 
	    <script src="/static/fileinput/js/fileinput.js" type="text/javascript"></script> 
{% endblock %}